<template>
  <!--单选题-->
  <el-radio-group v-if="question.type==0" v-model="optionValue" class="choice_container"
                  @change="input" >
    <el-radio v-for="(item,index) in answerList" :label="index" class="choice_item">
      <template #default>
        {{ Alphabet[index] }}
        <el-text>{{item.answer}}</el-text>
      </template>
    </el-radio>
  </el-radio-group>
  <!--多选题-->
  <el-checkbox-group v-if="question.type==1"  v-model="checkBoxOptionValue" @change="input">
    <el-checkbox v-for="(item,index) in answerList" :label="index" style="padding: 0;margin: 0.5em">
      <template #default>
        {{ Alphabet[index] }}
        <el-text>{{item.answer}}</el-text>
      </template>
    </el-checkbox>
  </el-checkbox-group>
  <!--判断题-->
  <el-radio-group v-if="question.type==2"  v-model="optionValue" class="choice_container"
                  @change="input">
    <el-radio v-for="(item,index) in answerList" :label="index" class="choice_item">
      {{item.answer}}
    </el-radio>
  </el-radio-group>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Alphabet, Question, QuestionAnswer} from "../../types/mytypes";
import {QuestionRequest} from "../../request/MyRequset";
const props = defineProps<{
  question:Question
}>()
let answerList = ref<QuestionAnswer[]>([])
const emit = defineEmits(['input','userInput'])
let optionValue = ref()
let checkBoxOptionValue = ref<number[]>([])

onMounted(async () => {
  await initData()
})

const initData = async ()=>{
  let getAnswerRes = await QuestionRequest.getAllAnswer(props.question.id as number)
  if(getAnswerRes.suc){
    answerList.value = getAnswerRes.data
  }
}
const input = () => {
  emitUserInput();
}
const emitUserInput = ()=>{
  let userAnswer:string[] = [];
  if(props.question.type!=1){
    userAnswer[0] = answerList.value[optionValue.value].answer;
  }else{
    for(let i in checkBoxOptionValue.value){
      userAnswer.push(answerList.value[checkBoxOptionValue.value[i]].answer)
    }
  }
  emit("userInput",{userAnswer:userAnswer,questionId:props.question.id})
}
</script>

<style scoped lang="scss">
.choice_container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  .choice_item {
    padding: 0;
    margin: 0.5em;
  }
}
</style>